<template>
  <div id="app">
  	<input type="checkbox" v-model="oselect" />
  	<!--
  		name值与添加的样式名相关
  		添加transition标签后组件显示会添加以下三个样式：(<name>表示name的值)
  		<name>-enter   (开始一瞬间添加，添加后立马删除) 初始值
  		<name>-enter-to   (在<name>-enter删除后添加) 最终值
  		<name>-enter-active   (动画全程都有) 过渡时间和样式transition
  		隐藏会添加的三个样式同上，只不过enter换成leave
  	-->
  	<transition name="fade">
  		<div class="box" v-if="oselect">hello</div>
  	</transition>
  	
  	<transition name="ani">
  		<div class="box" v-if="oselect">hello</div>
  	</transition>
  	
  	<transition name="anim">
  		<div class="box" v-if="oselect">hello</div>
  	</transition>
  	
  	<!--多个标签动画，用<transition-group>包裹，内部每个标签添加key=""-->
  	<transition-group name="anim">
  		<div key="a" class="box1" v-if="oselect">group1</div>
  		<div key="b" class="box1" v-if="oselect">group2</div>
  	</transition-group>
  	
  	<!--
  		使用Animate.css自定义动画
  		添加自定义属性
  	-->
  	<transition enter-active-class="animated rollIn" leave-active-class="animated rollOut">
  		<div class="box" v-if="oselect">hello</div>
  	</transition>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      oselect: true
    }
  }
}
</script>

<style>
.box{
	width: 200px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	font-size: 25px;
	color: #fff;
	background: #007AFF;
	margin: 10px;
}
.box1{
	width: 200px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	font-size: 25px;
	color: #fff;
	background: #008000;
	margin: 10px;
}

/*fade的css样式*/
.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

/*ani的css样式*/
/*初始值*/
.ani-enter{
	transform: scale(0);
}
/*最终值*/
.ani-enter-to{
	transform: scale(1);
}
/*过渡*/
.ani-enter-active{
	transition: 1s;
}
.ani-leave{
	transform: translateX(0px);
}
.ani-leave-to{
	transform: translateX(-250px);
}
.ani-leave-active{
	transition: 1s;
}

/*anim的css样式*/
/*显示动画*/
.anim-enter-active{
	animation: anim 1s;
}
@keyframes anim{
	0%{
		transform: scale(0);
	}
	33%{
		transform: scale(1.5);
	}
	66%{
		transform: scale(0.8);
	}
	100%{
		transform: scale(1);
	}
}
/*隐藏动画*/
.anim-leave{
	transform: translateX(0px);
}
.anim-leave-to{
	transform: translateX(-250px);
}
.anim-leave-active{
	transition: transform 1s;
}
</style>
